<template>
  <div class="s-property">
    <Obj></Obj>
    <Props></Props>
    <Behaviors></Behaviors>
    <Variable></Variable>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from 'vue';
import SSection from '@/ui-kit/section/section.vue';
import SProp from '@/ui-kit/prop/prop.vue';
import SInput from '@/ui-kit/input/input.vue';
import { sceneAssistant } from '../scene';
import Obj from './object.vue';
import Props from './props.vue';
import Behaviors from './behaviors.vue';
import Variable from './variable.vue';
import propertyStore, { PropertyState } from './store';
import { Emitter } from '@/ui-kit/index';
import { Msg } from '../msg';
import { assignWith } from 'lodash';

export default defineComponent({
  name: 'property-index',
  components: {
    Variable,
    Behaviors,
    Props, Obj, SInput,
    SProp, SSection,
  },
  emits: [],
  setup(props, { emit }) {
    let timerId: any = null;

    async function query() {
      if (sceneAssistant.selectNodeValid()) {
        let ret: PropertyState | null = await sceneAssistant.dumpSelectNode();
        if (ret) {
          return propertyStore().updateProperty(ret);
        }
      }
      return propertyStore().reset();
    }

    function doQuery() {
      timerId = setTimeout(async () => {
        await query();
        doQuery();
      }, 1000);
    }

    onMounted(async () => {
      doQuery();
      await query();

      Emitter.on(Msg.ShowNodeProperty, async (node: cc.Node) => {
        if (node) {
          await query();
        }
      });
    });

    onUnmounted(() => {
      if (timerId !== null) {
        clearInterval(timerId);
        propertyStore().reset();
        timerId = null;
      }
    });

    return {};
  },
});
</script>
<style scoped lang="scss">
.s-property {

}
</style>
